<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/css/arrow-box.css" />

    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>移动端页面宽度</h2>

                <pre
                    class="prettyprint">&lt;meta name="viewport" content="width=320,user-scalable=0,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0" /&gt;</pre>

                <h2>手机区域内滚动</h2>

                <p>
                    使用样式 -webkit-overflow-scrolling : touch;，iOS 有滚动回弹效果。
                </p>
                <p>
                    自定义滚动条样式（只对 webkit 有效）：因为大量使用 -webkit-overflow-scrolling: touch; 区域内局部滚动，所以在 PC
                    上应该要让滚动条变细，不然会遮住内容。手机端上冇此问题
                </p>
                <div class="box center"
                    style="width:300px;height:150px;-webkit-overflow-scrolling: touch;overflow: auto;">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged.
                </div>
                <style>
                    /* 自定义滚动条样式（只对 webkit 有效） 这是全局的，要针对某一元素可以 div::-webkit-scrollbar */
                    ::-webkit-scrollbar {
                        width: 7px;
                        /* 对垂直流动条有效 */
                        height: 5px;
                        /* 对水平流动条有效 */
                    }

                    ::-webkit-scrollbar-thumb {
                        background-color: lightgray;
                        /*border: 1px solid gray;*/
                        border-radius: 3px;
                    }

                    ::-webkit-scrollbar-thumb:window-inactive {
                        background-color: rgba(0, 0, 0, 0);
                    }
                </style>

                <p>如果结构如下 div.areaScroll > ul > li，则不能 float:left，必须 float: none;display: inline-block;</p>

                <div class="box center"
                    style="width:300px;height:20px;
                         overflow-x: auto;white-space: nowrap; -webkit-overflow-scrolling: touch;overflow: hidden;">
                    TODO
                </div>

                <style>
                    ul.tab {
                        overflow: hidden;
                        width: 30%;
                    }

                    ul.tab li {
                        float: left;
                        text-align: center;
                        cursor: pointer;
                        border-bottom: 3px solid lightgray;
                        padding-bottom: 5px;
                        width: 33.3%;
                    }

                    ul.tab li.active {
                        border-bottom-color: #0084C9;
                        color: #0084C9;
                    }
                </style>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
</body>

</html>